<template>
  <div id="account">
    <header class="header">
      <h2>账户详情</h2>
    </header>
    <main class="main">
      <div class="update">
        <div class="img">
          <img src="https://static.smartisanos.cn/account/asset/img/default-user-avatar.png" alt="">
        </div>
        <div class="name">
          <h3>{{ username }}</h3>
          <van-cell is-link @click="showPopup"><i class="iconfont icon-edit-1-copy"></i></van-cell>
        </div>
      </div>
      <ul class="msg">
        <li><span>手机</span><p>+86<span>{{ tel }}</span><i class="iconfont icon-youjiantou"></i></p></li>
        <li><span>邮箱</span><p><span>未绑定</span><i class="iconfont icon-youjiantou"></i></p></li>
      </ul>
      <div class="pwd" @click="toPwd">
        <span>修改密码</span><i class="iconfont icon-youjiantou"></i>
      </div>
      <div class="btn">
        <!-- <button @click="toywx">返回个人中心</button> -->
        <button @click="toHome">退出登录</button>
      </div>
    </main>
    <van-popup v-model="show" position="top" :style="{ height: '40%' }" class="van-popup">
      <h2>修改昵称</h2>
      <input type="text" placeholder="请输入新的昵称" v-model="newname">
      <input type="password" placeholder="请输入密码以确认您的身份" v-model="password">
      <div class="makesure">
        <button @click="makesure">确定</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Vue from 'vue'
import { Popup, Toast } from 'vant'

Vue.use(Popup, Toast)

export default {
  data () {
    return {
      userid: '',
      flag: true,
      username: '',
      tel: '',
      show: false,
      newname: '',
      password: ''
    }
  },
  created () {
    axios.get('/users?userid=' + this.$route.query.userid).then(res => {
      console.log('acco', res.data.data[0].tel)
      this.tel = res.data.data[0].tel.replace(/^(.{3}).*(.{4})$/, '$1****$2')
      this.username = res.data.data[0].username
      if (this.username.length > 7) {
        this.username = res.data.data[0].username.replace(/^(.{3}).*(.{4})$/, '$1****$2')
      }
    })
  },
  methods: {
    toReturn () {
      this.$router.push('/user')
      // this.$router.push('/users/update/username', {
      //   userid: this.$route.query.userid,
      //   password: this.password,
      //   newname: this.newname
      // }).then(res => {
      //   if (res.data.code === '200') {
      //     Toast('修改成功')
      //   } else {
      //     Toast('密码输入错误')
      //   }
      // })
    },
    toHome () {
      // localStorage.clear()
      localStorage.removeItem('userid')
      localStorage.removeItem('token')
      this.$router.push('/')
    },
    showPopup () {
      this.show = true
    },
    makesure () {
      if (this.password === '' || this.newname === '') {
        Toast('请输入正确信息')
      } else {
        axios.post('/users/update/username', {
          userid: this.$route.query.userid,
          password: this.password,
          newname: this.newname
        }).then(res => {
          if (res.data.code === '200') {
            Toast('修改成功')
            this.$router.go(0)
          } else {
            Toast('密码输入错误')
          }
        })
      }
    },
    toPwd () {
      this.$router.push('/password?userid=' + this.$route.query.userid)
    },
    toywx () {
      this.$router.push('/user')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
html, body, #account {
  @include rect(100%, 100%);
}
#account {
  .header {
    @include flexbox();
    @include rect(100% ,0.5rem);
    @include background-color(black);
    @include color(#fff);
    @include justify-content(center);
    @include align-items(center);
    h2 {
      // @include flex();
      // @include rect(auto, 100%);
      @include font-size(0.2rem);
    }
    // span {
    //   position: absolute;
    //   left: 0.1rem;
    //   top:50%;
    //   margin-top: -0.1rem;
    // }
  }
  .main {
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    // @include justify-content(center);
    @include align-items(center);
    @include background-color(#efefef);
    @include overflow(auto);
    .update {
      @include flexbox();
      @include rect(96%, 0.8rem);
      @include background-color(rgb(250, 250, 250));
      @include margin(0.12rem 0 0 0);
      @include border-radius(0.08rem 0.08rem 0 0);
      .img {
        @include rect(0.8rem, 100%);
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        img {
          @include rect(70%, 70%);
          @include border-radius(50%);
        }
      }
      .name {
        @include flex();
        @include rect(auto, 100%);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        h3 {
          @include margin(0 0 0 0.1rem);
          @include font-size(0.2rem);
        }
        i {
          @include margin(0 0.2rem 0 0);
          @include font-size(0.24rem);
          @include color(#aaa);
        }
      }
    }
    .msg {
      @include rect(96%, auto);
      @include background-color(#fff);
      @include border-radius(0 0 0.08rem 0.08rem);
      @include margin(0 0 0.2rem 0);
      li {
        @include rect(100%, 0.6rem);
        @include border(0.01rem 0 0 0, #ccc, solid);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        @include padding(0 0.2rem);
        >span {
          @include font-size(0.18rem);
          @include color(#000);
        }
        p {
          @include font-size(0.16rem);
          @include color(#666);
          span {
            @include margin(0 0.1rem);
          }
        }
      }
    }
    .pwd {
      @include rect(96%, 0.6rem);
      @include background-color(#fff);
      @include border-radius(0.08rem);
      @include margin(0 0 0.2rem 0);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      @include padding(0 0.2rem);
      span {
        @include font-size(0.18rem);
        @include color(#000);
      }
      i {
        @include font-size(0.16rem);
        @include color(#666);
      }
    }
    .btn {
      @include rect(96%, auto);
      button {
        @include rect(100%, 0.6rem);
        @include font-size(0.2rem);
        @include color(#fff);
        @include font-weight(700);
        @include border-radius(0.1rem);
        @include background-color(rgba(255, 0, 0, 0.9));
        border: 0;
        // &:nth-child(1) {
        //   @include background-color(#aaa);
        //   @include margin(0.3rem 0 0.1rem);
        // }
      }
    }
  }
  .van-popup {
    @include flexbox();
    @include flex-direction(column);
    @include align-items(center);
    @include background-color(#efefef);
    // @include justify-content(center);
    h2 {
      @include rect(100%, 0.5rem);
      @include background-color(#000);
      @include font-size(0.18rem);
      @include color(#fff);
      @include line-height(0.5rem);
      @include text-align(center);
    }
    input {
      @include rect(94%, 0.5rem);
      @include margin(0.3rem auto 0);
      @include border-radius(0.08rem);
      // @include border(0.01rem, #ccc, solid);
      border: 1px solid #ccc;
      text-indent: 0.1rem;
    }
    .makesure {
      @include rect(100%, 0.5rem);
      @include flexbox();
      @include justify-content(flex-end);
      @include align-items(center);
      @include padding(0 0.2rem 0 0);
      button {
        @include rect(auto, 60%);
        @include padding(0.01rem 0.1rem);
        @include background-color(#f00);
        @include color(#fff);
        @include border-radius(0.03rem);
        border: 0;
      }
    }
  }
}
</style>
